<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头像上传</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        img{ width: 100%; height: 100%;}
        .box-body { margin:0 auto; width:300px; height:100%; border:1px}
        .box-footer { margin:0 auto; width:300px; height:100%; border:1px}
        .form-control{width: 320px}
    </style>
</head>
<body>
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">我的头像</h3>
    </div>

    <div class="box-body">
        <div class="imgdiv" style="width: 300px;height: 300px;"></div>
    </div>

    <div class="box-footer">
        <div class="input-file-box" >
            <input type="file" id="articleImageFile" multiple class="form-control" style="width: 180px; display: inline;">
            <input id="saveImgBtn" type="button" class="btn btn-default" style="width: 93px; height: 35px;margin-bottom:10px;" value="上传" />
        </div>
    </div>

</div>
</body>
<script type="text/javascript">
    $("#saveImgBtn").on('click', function() {
        var formData = new FormData();
        formData.append("file", $("#articleImageFile")[0].files[0]);
        formData.append("name", $("#articleImageFile").val());
        $.ajax({
            url : '/image/imgFile',
            type : 'POST',
            async : false,
            data : formData,
            processData : false,
            contentType : false,
            beforeSend : function() {
                console.log("图片上传成功");
            },

            success : function(result) {
                if (result.state == "1") {
                    alert(result.message);
                    var data=result.data.url;
                    $(".imgdiv").html('');
                    $(".imgdiv").html('<img style="width:250px;height:300px;" src='+data+'>');
                    $(".imgdiv").data("imgurl",data);
                } else if(result.state == "0"){
                    console.log(result.message);
                    alert("请上传正确图片格式");
                } else{
                    alert("图片上传失败");
                }
            }
        });
    });
</script>